<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
		<style type="text/css">
			div{
				background-color: #f00;
				margin: 5px;
			}
		</style>
	</head>
	<body>
		<!-- 1.定义了一个立即执行函数：function(window,noGlobal)
		2.在立即执行函数内部，初始化对象jQuery，jQuery是一个函数
		3.jQuery挂在到window对象上，同时占用jQuery和$
		4.jQuery返回函数jQuery.prototype.init的执行结果，init是Sizzle的调用者
		5.init()返回类数组
		6.init.prototype = jQuery.prototype -->
		<div id="div1">div1</div>
		<div class="cls1">cls1</div>
		<div class="cls2">cls2-1</div>
		<div class="cls2">cls2-2</div>
		<div class="cls2">cls2.3</div>
		<input type="button" class="cls1" id="btn" value="click me" />
		<label><input type="checkbox" id="chb" checked />label</label>
		<input type="checkbox" id="chb2" disabled />
		<label for="chb2"> label2</label>
		
		<script type="text/javascript">
			// //基本选择器
			// // #id
			// // $('#div1').css('background-color','#0f0')
			// // .class
			// // $('.cls1').css('background-color','#0f0')
			// // tag
			// // $('div').css('background-color','#0f0')
			// 
			// //逗号分隔并列的多个选择器,表示并集,客户以理解成,满足--》选择器1 or 满足选择器2
			// // $('div,input').css('background-color','#0f0')
			// 
			// // 无分隔得多个选择器(不能有空格),表示交集,可以理解成--》选择器1 and 选择器2
			// // $('div.cls1').css('background-color','#0f0')
			// 
			// // DOM Element
			// $('#div1').click(function(){
			// 	var $this = $(this);
			// 	$(this).css('background-color','#0f0');
			// })
			
			// jQuery的特点
			// 1.类数组的自动遍历
			// 对于jQuery对象调用函数,等价于对类数组的所有元素进行遍历操作,相当于循环
			// $('.cls2').css('background-color','#0f0');
			
			// 2.读和写使用同名的函数
			// var a = document.getElementById('div1');
			// a.style.backgroundColor = '#0f0';
			// console.log(a.style.backgroundColor);
			// 
			// $('#div1').css('background-color','#0f0');
			// console.log($('#div1').css('background-color'));
			
			//DOM 里面可以修改什么？
			// 内容,属性,样式
			// 		内容:innerHtml,textContent,value
			// 		属性:标准属性:状态属性(disabled，checked,selected)
			// 		样式:CSS
			
			// 1.内容:
			// 		1.innerHTML ==> html()
			// $('#div1').html('<div>inner Div</div>');
			// console.log($('#div1').html());
			// 
			// 		textContent == > text()
			// $('#div1').text('<div>inner Div</div>');
			// console.log($('#div1').text());
			
			// 		value == > val()
			// $('#btn').val('others');
			// console.log($('#btn').val());
			
			// 2.属性:
			// 		getAttribute, setAttribute == attr()
			// console.log($('#btn').attr('type'));
			// $('#btn').attr('type','text');
			
			//		checked, disabled, selected ==> prop()
			// console.log($('#chb').prop('checked'));
			// $('#chb').prop('checked',false); //将选择框手动改成false
			
			// 3.函数的链式调用
			
			// var $div1 = $('#div1');
			// $div1.css('background-color','#0f0');
			// $div1.css('border','2px solid #000');
			// 
			// var $div1 = $('#div1')
			// 	.css('background-color','#0f0')
			// 	.css('border','2px solid #000');
			
			// var $div1 = $('#div1')
			// 	.css({
			// 		'background-color':'#0f0',
			// 		'border':'2px solid #000'
			// 	});
		</script>
		
	</body>
</html>
